<template>
	<div>
		<el-form :model="loginData">
			<el-form-item>
				<el-input placeholder="请输入账户" v-model="loginData.user"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="请输入密码" v-model="loginData.pwd" type="password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="handleLogin">登录</el-button>
				<el-button @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { login } from '@/api'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
// 获取路由
const router = useRouter()
// 登录数据
const loginData = reactive({
	user: '',
	pwd: ''
})
// 登录函数
const handleLogin = debounce(async () => {
	// 发起登录请求
	const resp = await login(loginData)
	// 获取登录的结果
	const { code, token, mess } = resp.data
	console.log(code);
	// 验证 code 
	if (code === 200) {
		localStorage.setItem('token', token)
		ElMessage({
			type: 'success',
			message: '登录成功， 3s之后跳转首页...',
			onClose() {
				router.push({ path: '/' })
			}
		})
	} else {
		ElMessage({
			type: 'error',
			message: mess
		})
	}
}, 400)

// 重置
const handleReset = () => {
	loginData.user = ''
	loginData.pwd = ''
}
</script>